<template>
    <el-menu :collapse="isCollapse"
        :default-active="defaultPage"
        class="el-menu-vertical-demo"
        style="height: 100%;">
        <template v-for="(item, index) in menuTreeData">
            <el-submenu :index="item.code"
                :key="index" v-if="item.children">
                <template slot="title">
                    <i :class="item.icon?item.icon:'el-icon-menu'"/>
                    <span slot="title">{{ item.name }}</span>
                </template>
                <el-menu-item :index="item2.code" :key="index+'-'+index2"
                    v-for="(item2, index2) in item.children">
                    {{item2.name}}
                </el-menu-item>
            </el-submenu>
            <el-menu-item :key="index" :index="item.code" v-else>
                <i :class="item.icon?item.icon:'el-icon-menu'"/>
                <span>{{item.name}}</span>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script>
export default {
    props: {
        isCollapse: Boolean,
        defaultPage: String,
        menuTreeData: Array,
    },
    data() {
        return {
            
        }
    },
    methods: {
        handleOpen() {},
        handleClose() {},
    }
}
</script>

<style scoped>
    .el-menu-vertical-demo {
        max-width: 200px!important;
        height: 100%;
        font-weight: normal;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
    .el-menu {
        /* border: 0px; */
    }
</style>